<template>
<div class="creative-box">
    <SiderBav :nav="planNav"></SiderBav>
    <div class="creative-content">
        <div class="btn_box">
                <el-select v-model="planStatus" placeholder="请选择" style="height: 32px;">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
			   <el-select v-model="payType" placeholder="请选择" style="height: 32px;">
                    <el-option
                    v-for="item in payTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
			   </el-select>	
               <div style="float:right;width:200px;height:32px;margin-right:32px;">
                    <el-input v-model="searchPlanName" placeholder="计划名"></el-input>
                </div>	
		</div>
        <!-- <div v-loading="loading" v-if="loading" style="margin-top:100px"></div> -->
        <div class="empty" v-show="dataList.length<=0 &&  !loading">
            暂无数据
        </div>
        <table  class="list-table" v-show="dataList.length>0">
            <tr style="height: 60px; background: #fafafa;">
                <template >
                    <th><input type="checkbox" v-model="checkboxAll"> 选择</th>
                    <th>状态</th>
                    <th>计划信息</th>
                    <th>投放时间</th>
                    <th>日预算</th>
                    <th>
								上小时消耗
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-asc'}" 
								@click="sortfn('last_charge-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-desc'}" @click="sortfn('last_charge-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								消耗 
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-asc'}"  @click="sortfn('charge-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-desc'}" @click="sortfn('charge-desc')"> <i class="el-icon-sort-down	"></i> </a>
							</th>
							<th>
								消耗占比
								
								<a href="javascript:;" :class="{'sortClass':sortType=='percent-asc'}" 
								@click="sortfn('percent-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='percent-desc'}" @click="sortfn('percent-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								展现
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-asc'}" @click="sortfn('ad_pv-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-desc'}" @click="sortfn('ad_pv-desc')">
									 <i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								点击
								<a href="javascript:;" :class="{'sortClass':sortType=='click-asc'}" @click="sortfn('click-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='click-desc'}" @click="sortfn('click-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								CTR
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-asc'}" @click="sortfn('ctr-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-desc'}" @click="sortfn('ctr-desc')"> 
									<i class="el-icon-sort-down	"></i>
								</a>
							</th>
							<th>
								CPM
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-asc'}" @click="sortfn('ecpm-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-desc'}"  @click="sortfn('ecpm-desc')"> <i class="el-icon-sort-down"></i> </a>
							</th>
							<th>
								CPC
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-asc'}" @click="sortfn('ecpc-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-desc'}" @click="sortfn('ecpc-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
                </template>
            </tr>
            <template v-for="(o) in dataList"  >
                <tr  :class="{'trbg':o.hover}" style="border-bottom: 1px solid #ebebeb;">
                    <td style="height:86px;">
                        <input type="checkbox"  v-model="checkbox" :value="o.id" style="margin-right:10px;margin-top:0;">
                        <a href="javascript:;" v-show="!o.open" @click="getCreativeByPlan(o)"><i class="el-icon-plus"></i></a>
                        <a href="javascript:;" v-show="o.open" @click="closeCreativeTable(o)"><i class="el-icon-minus"></i></a>
                    </td>
                    <td>
                        {{ o.online_status | planStatus }}
                    </td>
                    <td>
                        {{ o.name }}
                    </td>
                    <td>	
                        起：{{ o.start_time }}<br/>
                        止：{{ o.end_time }}
                    </td>
                    <td>
                        <img v-if="o.type==8" title="按图片单次展现出价，注：点击不另外计费。" class="zs_iconfon" src="../imagin/c.jpg" alt="">
                        <img v-if="o.type==2" title="按图片千次展现出价，注：点击不另外计费。" class="zs_iconfon" src="../imagin/m.jpg" alt="">
                        {{ o.day_budget/100 }}
                    </td>
                   	<td>
                        {{ o.last_charge?(o.last_charge):0 }}
                    </td>
                    <td>{{ o.charge?(o.charge):0 }} </td>
                    <td>{{ o.percent?(percent):0 }}</td>
                    <td>{{ o.ad_pv?(o.ad_pv):0 }} </td>
                    <td>{{ o.click?(o.click):0 }}</td>
                    <td>{{ o.ctr?(o.ctr):0 }}</td>
                    <td>{{ o.ecpm?(o.ecpm):0 }}</td>
                    <td>{{ o.ecpc?(o.ecpc):0 }}</td>
                </tr>
                <tr v-show="o.open"     style="border-bottom: 1px solid #ebebeb">
                    <td colspan="12"  style="text-align: center; height: 40px;">
                            <span style="color:#999;" v-if="o.creativeList&&o.creativeList.length<=0">无创意</span>    
                            <table class="creative-table" v-if="o.creativeList&&o.creativeList.length>0">
                                <tr style="height: 40px; background: #fafafa;">
                                    <th style="width:15%; text-align: center;">
                                       选择
                                    </th>
                                    <th style="width:50%">
                                        创意信息
                                    </th>
                                    <th>
                                        创意状态
                                    </th>
                                </tr>
                                <tr v-for="creative in o.creativeList">
                                   <td style=" text-align: center;">
                                        <input type="checkbox"  @click="fileCreativeCheckInput(o)" :value="creative.id+'/'+creative.adgroup_id" v-model="o.creativeCheck" name="" id="">
                                    </td>
                                    <td class="creativeMsgTd">
                                        <div>
                                            <el-popover v-if="creative.image_type==2"
                                                placement="right"
                                                trigger="hover"
                                                style="display: inline-block;height:110px;overflow: hidden;width: 170px;"
                                                >
                                                <!-- <img :src="o.image_path" alt="">  -->
                                                <iframe width="300" height="350" frameborder="0" scrolling="no" style="width: 300px;height: 350px; position:absolute;top:0;left:0%; transform-origin: left top;border:none;" :src="creative.image_path"></iframe>
                                                <el-button slot="reference" style="width: 170px; height: 110px; padding:0;">
                                                    <!-- <img :src="o.image_path" alt="">  -->
                                                    <iframe width="300" height="350" frameborder="0" scrolling="no" style="transform: scale(0.2857142857142857);transform-origin: left top;position:relative;top:0px;left:0px;border:none;" :src="creative.image_path"></iframe>
                                                </el-button>
                                            </el-popover>
                                            <el-popover v-if="creative.image_type==1"
                                                placement="right"
                                                trigger="hover"
                                                style="display: inline-block;height:110px;overflow: hidden;width: 170px;"
                                                >
                                                <img :src="creative.image_path" alt="">
                                                <el-button slot="reference" style="width: 170px; height: 110px; padding:0;">
                                                    <img :src="creative.image_path" alt=""> 
                                                </el-button>
                                            </el-popover>
                                        </div>
                                        <div class="msg_box">
                                            <div style="color:#000000">
                                                 {{ creative.name  }}
                                            </div>
                                            <div>
                                                单元：{{ creative.adgroup_name  }}
                                            </div>
                                            <div>
                                                创意尺寸：{{ creative.creative_size }}
                                            </div>
                                            <div>
                                                URL： <a :href="creative.click_url" target="_blank">{{creative.click_url  }}</a> 
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        {{ creative.audit_status }}
                                    </td>
                                </tr>
                            </table>
                    </td>
                </tr>
            </template> 
        </table>
        <el-pagination v-show="total_count>19  && !loading"
        :page-size="20"
        :pager-count="11"
        :current-page="currentPage"
        layout="prev, pager, next"
        @current-change="pagechange"
        :total="total_count"
        >
        </el-pagination>
        <el-dialog title="创意列表" class="creative-check-box" @close="close"  :visible.sync="dialogTableVisible">
            <CheckCreative :campaign_list="checkbox" v-if="dialogTableVisible"  v-model="checkboxModal" ></CheckCreative>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="creativeSure">{{ !creativeSureLoadding?"确 定":"提交中..." }}  </el-button>
            </div>
        </el-dialog>
        
    </div>
</div>
</template>

<style src="./style.css" scoped lang="less"></style>

<script src="./script.js"></script>
